<template>
  <a-drawer
    :title="titleMap"
    :width="600"
    :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }"
    @close="close"
  >
    <a-form :form="form">
      <a-form-item :label="$t('u111')">
        <a-input
          v-decorator="[
            'YtRoleName',
            { rules: [{ required: true, message: $t('u113') }] },
          ]"
          :placeholder="$t('u113')"
        />
      </a-form-item>
      <a-form-item :label="$t('u112')">
        <a-input
          v-decorator="[
            'YtRoleNameEn',
            { rules: [{ required: true, message: $t('u114') }] },
          ]"
          :placeholder="$t('u114')"
        />
      </a-form-item>
      <a-form-item :label="$t('user.verification-code.required1115661100')">
        <a-select
          mode="multiple"
          :filter-option="filterOption"
          option-filter-prop="children"
          v-decorator="[
            'RoleAuthority',
            { rules: [{ required: true, message: $t('u115') }] },
          ]"
          :placeholder="$t('user.verification-code.required1115661101911')"
        >
          <a-select-option
            v-for="item in funList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <!-- 下方按钮 -->
    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-button
        :style="{ marginRight: '20px' }"
        class="w-[200px]"
        @click="close"
        >{{ $t("user.email.required11") }}
      </a-button>
      <a-button
        :loading="loading"
        class="w-[200px]"
        type="primary"
        @click.native.prevent="submit()"
      >
        <span v-if="!loading">{{ $t("app.setting.weakmode") }}</span>
        <span v-else
          >{{ $t("user.verification-code.required1115661107") }}...</span
        >
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import {
  authorityDropDown,
  authorityDrownDrop,
  authorityList,
  authorityQuery,
} from "@/api/index";
import { userRolesCreate } from "@/api/indexJson";

export default {
  data() {
    return {
      sourceData: {},
      form: this.$form.createForm(this),
      funList: [],
      authorityLists: [],
      visible: false,
      loading: false,
      titleMap: "",
      // titleMap: ["创建角色", "编辑角色"],
      mode: 0,
      roleId: 0,
      YtRoleName: "",
      YtRoleNameEn: "",
      inputList: [],
      // 当前的权限提交data
      powerSubmitData: [],
    };
  },
  methods: {
    authorityList,

    /**
     *
     * @param {*} type 0 新增
     * @param {*} data 1 修改
     */
    async open(mode = 0, data = {}) {
      this.titleMap = this.$t("user.verification-code.required111566110577150");
      let { YtRoleFunctionIdAuthority } = data;
      this.mode = mode;
      // 获取所有的功能
      const { data: dataList } = await authorityDropDown();
      this.funList = dataList;
      this.visible = true;
      // 修改
      if (mode == 1) {
        this.titleMap = this.$t(
          "user.verification-code.required111566110577151"
        );
        this.roleId = data.YtId;
        let arr = [];
        data.YtRoleFunctionIdAuthority.forEach((item) => {
          let res = [];
          if (item.AuthorityId) {
            res = item.AuthorityId.split(",");
            arr = arr.concat(res);
          } else {
            arr.push(item.Function);
            console.log("arr", arr);
          }
        });
        await this.$nextTick();
        this.form.setFieldsValue({
          YtRoleName: data.YtRoleName,
          YtRoleNameEn: data.YtRoleNameEn,
          RoleAuthority: arr,
        });
      }
    },

    submit() {
      const {
        form: { validateFields },
      } = this;
      this.loading = true;
      const { YtRoleName, roleId, YtRoleNameEn } = this;
      validateFields(
        ["YtRoleName", "RoleAuthority", "YtRoleNameEn"],
        { force: true },
        async (err, values) => {
          if (!err) {
            try {
              console.log(values);
              let res = [];
              if (values.RoleAuthority) {
                res = Object.values(values.RoleAuthority);
                console.log(res);
              }
              this.mode == 0
                ? // ? await createRole({ ...values })
                  // ? await userRolesCreate({YtRoleName:values.YtRoleName, YtAdminRoleFunction:roleFunction,YtAuthorityId:role })
                  await userRolesCreate({
                    YtRoleName: values.YtRoleName,
                    YtRoleNameEn: values.YtRoleNameEn,
                    RoleAuthority: res,
                  })
                : await userRolesCreate({
                    YtRoleName: values.YtRoleName,
                    YtRoleNameEn: values.YtRoleNameEn,
                    // Id: this.roleId,
                    YtId: this.roleId,
                    RoleAuthority: res,
                  });
              this.$emit("succeed");
              this.$message.success(
                this.$t("user.verification-code.required111566110577308")
              );
              this.close();
            } catch (error) {
              this.$message.error(error);
              console.log(error);
            } finally {
              this.loading = false;
            }
          } else {
            setTimeout(() => {
              this.loading = false;
            }, 600);
          }
        }
      );
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    close() {
      this.inputList = [];
      this.funList = [];
      this.visible = false;
      this.form.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

.ant-form-item-label {
  display: inline-block;
  overflow: visible !important;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
</style>